<template>
<div class='login'>
  <div class="top">
    <span>登录</span>
  </div>
<!-- 用户输入框 -->
  <div class="account">
    <!-- 账号 -->
    <div class="useName">
      <input type="text" placeholder="请输入账号或电话号码"/>
    </div>
    <!-- 密码 -->
    <div class="usePass">
      <input type="text" placeholder="请输密码"/>
    </div>
    <div class="useVerCode">
      <input type="text" placeholder="请输验证码"/>
      <a href="##">获取验证码</a>
    </div>
    <!-- 确定用户协议 -->
    <div class="Protocol">
      <van-checkbox
      v-model="checked"
      shape="square"
      checked-color="#00B75D"
      icon-size="14px"
      >我已同意
        <a href="##">用户协议</a>
      </van-checkbox>
    </div>
    <!-- 登录按钮 -->
    <van-button
    type="primary"
    color="#00B75D"
    >登录</van-button>
  </div>
</div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      checked: true,
    }
  },
}
</script>

<style lang='less' scoped>
.login{
  position: relative;
  .top{
    width: 100%;
    height: 500px;
    background: #00B75D;
    text-align: center;
    line-height: 400px;
    font-size: 20px;
    font-weight: 700;
    color: white;
  }
  .account{
    width: 85%;
    height: 650px;
    background: white;
    border: 1px solid rgb(216, 215, 215);
    position: absolute;
    top: 300px;
    left: 60px;
    .useName{
      width: 95%;
      height: 70px;
      // background: red;
      margin: 0 auto;
      margin-top: 70px;
      border-bottom: 2px solid #B39DA5;
      input{
        width: 97%;
        height: 90%;
        outline: none;
        border: none;
        color: #B39DA5;
      }
    }
    .usePass{
      display: block;
      width: 95%;
      height: 70px;
      // background: red;
      margin: 0 auto;
      margin-top: 70px;
      border-bottom: 2px solid #B39DA5;
      input{
        width: 97%;
        height: 90%;
        outline: none;
        border: none;
        color: #B39DA5;
      }
    }
    .useVerCode{
      display: none;
      width: 95%;
      height: 70px;
      margin: 0 auto;
      margin-top: 70px;
      border-bottom: 2px solid #B39DA5;
      position: relative;
      input{
        width: 97%;
        height: 90%;
        outline: none;
        border: none;
        color: #B39DA5;
      }
      a{
        position: absolute;
        right: 10px;
        top: 15px;
        font-size: 13px;
        color: #00B75D;
      }
    }
    .van-radio-group{
      margin-top: 100px;
      margin-left: 20px;
    }
  }
  .Protocol{
    margin-top: 80px;
    margin-left: 30px;
    font-size: 12px;

    a{
      color:#00B75D
    }
  }
  .van-button{
    width: 80%;
    margin-left: 60px;
    margin-top: 90px;
  }
}

</style>
